@charset'utf-8';
//@import './reset.scss';
@import './mixin.scss';
@import './scrollbar.scss';

$title-default-color:#BEBEBE;
$title-active-color:#546EFE;
$theme-color:#546EFE;
$font-color: #333333;
//$border-color:#EDEDED;
$border-color:rgba(237, 237, 237, 0.4);
$icon-color:#BEBEBE;
$text-color:#919090;
$font-gray-color: #000000; //797979
$font-gray-sub-color:#8d8d8d; //a9aba9
$list-bg-color:#d6d6d6;
$window-border:8px;

::-webkit-scrollbar{
  width: 0!important;
}
.plugin-ip{
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #e0e0e0;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #c2c2c2;
    border-radius: 0px;
    background-color: #c2c2c2;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px #c2c2c2;
    background-color: #c2c2c2;
  }

}




/*组件切换状态*/
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity .2s ease;
}

.component-fade-enter,
.component-fade-leave-to {
  opacity: 0;
}

/*消息*/
.msg-num {
  color: #ffffff !important;
  height: 16px;
  border-radius: 10px;
  font-size: 13px !important;
  line-height: 16px;
  text-align: center;
  display: inline-block;
}


// 列表暂无数据
.list-no-data {
  text-align: center;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  .jeicon-Page {
    font-size: 100px;
    color: $title-default-color;
  }

  p {
    margin-top: 10px;
    font-size: 18px;
    text-align: center;
    color: $title-default-color;
  }
}

/*聊天气泡*/
.bubble {
  font-size: 16px;
  position: relative;
  display: inline-block;
  clear: both;
  margin-bottom: 4px;
  padding: 9px 10px;
  vertical-align: top;
  border-radius: 9px;
  // max-width: 300px;
  word-wrap:break-word;
  > p {
    word-break:break-word;
  }
  &:before {
    position: absolute;
    top: 14px;
    // bottom:6px;
    display: block;
    width: 8px;
    height: 6px;
    content: '\00a0';
    transform: rotate(29deg) skew(-35deg);
  }

  &.other {
    float: left;
    color: #3F3F3F;
    font-size: 14px;
    background-color: #E5E5EA;
    align-self: flex-start;
    &:before {
      left: -3px;
      background-color: #E5E5EA;
    }
  }

  &.me {
    float: right;
    color: #ffffff;
    font-size: 14px;
    background-color: #6A9CE4;
    align-self: flex-end;

    &:before {
      right: -3px;
      background-color: #6A9CE4;
    }
  }

  &.tips {
    width: 100%;
    color: #8E8E93;
    font-size: 13px;
    text-align: center;
  }
}
.group-outer{
  width: 100%;
  height: 100%;
  // overflow: hidden;
  .list-div {
    padding: 13px 17px;
    width: 100%;
    display: flex;
    //justify-content: space-between;
    .item-avatar{
      width: 40px;
      height: 40px;
      img{
        width: 40px;
        height: 40px;
        display: inline-block; 
        border-radius: 50%;
      }
      .item-avatar-text{
        background: #546EFE;
        line-height: 40px;
        text-align: center;
        color: #fff;
        width:40px;
        border-radius: 50%;
      }
    }
    .item-content{
      width: 85%;
      margin-left: 6px;
      .item-name {
        cursor: pointer;
        padding-top: 10px;
        color: $font-color;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        margin-bottom: 3px;
      }
    }
  }

}
.ip-list-item-active {
  background: rgba(237, 237, 237, 0.3); // 置顶样式的修改
}
.new-list-outer{
  height: 100%;
  overflow: hidden;
  html::-webkit-scrollbar{width:0px}
  overflow:-moz-scrollbars-none;
  -ms-overflow-style:none;
  .new-list-inner{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    /*聊天列表*/
    .ip-list-item {
      padding-left: 17px;
      height: 70px;
      border-bottom: 1px solid rgba(206, 202, 202, 0.1);;
      cursor: pointer;
      .item-avatar {
        width: 40px;
        height: 40px;
        border-radius: 40px;
      }
      .item-avatar-text{
        background: #546EFE;
        line-height: 40px;
        text-align: center;
        color: #fff;
      }
      .name-circle{
        width: 40px;
        height: 40px;
        display: block;
        background:rgba(252,179,63,1);
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        font-size:14px;
        color: #fff;
      }

      .common-div {
        padding-top: 13px;
        overflow: hidden;
        padding-right: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
        .item-time {
          position: absolute;
          left: 40px;
          right: 70px;
          top:13px;
          .item-name {
            color: $font-color;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            margin-left: 6px;
            display: block;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
          }

          .item-msg {
            color: #919090;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            padding-top: 1px;
            margin-left: 6px;
            display: block;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
          }

        }
        .item-right{
          .msg-nums {
            border-radius: 10px;
            font-size: 12px;
            text-align: center;
            line-height: 12px;
            background: #FA4444;
            color: #fff;
            margin-top:5px;
            padding:2px 4px;
            float: right;
          }
          .inside10{
            width: 16px;
            height:16px;
          }
        }
      }
    }
  }
}




